<template>
    <!-- {{btns}} -->
    <!-- 垂直方向上下居中，水平方向左右居中，距离下外边距 -->
    <div class="flex items-center justify-between mb-4">
        <div>
            <el-button v-if="btns.includes('create')" type="primary" size="small" @click="$emit('create')">新增</el-button>

            <el-popconfirm title="是否要批量删除?" v-if="btns.includes('delete')" confirmButtonText='确认' cancelButtonText='取消'
                @confirm.stop="$emit('delete')">
                <template #reference>



                    <el-button type="danger" size="small">批量删除</el-button>

                </template>

            </el-popconfirm>
            <!-- 有了插槽父组件可以在任意位置添加组件 -->
            <slot />

        </div>

        <div>
            <!-- 判断对象中是否包含刷新 -->
            <el-tooltip effect="dark" content="刷新数据" placement="top">
                <!-- 刷新重新加载首页 -->
                <el-button v-if="btns.includes('refresh')" type="text" size="small" @click="$emit('refresh')">

                    <!-- 限制图标尺寸为20 -->
                    <el-icon :size="15">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-tooltip>

            <el-tooltip v-if="btns.includes('download')" effect="dark" content="导出数据" placement="top">
                <!-- 刷新重新加载首页 -->
                <el-button  type="text" size="small" @click="$emit('download')">

                    <!-- 限制图标尺寸为20 -->
                    <el-icon :size="15">
                        <!-- icon图标 -->
                        <Download />
                    </el-icon>
                </el-button>
            </el-tooltip>
        </div>

    </div>
</template>
<script setup>
//计算属性 computed @vue/reactivity

import { computed } from "vue"

defineEmits(["create", "refresh", "delete","download"])
const prpps = defineProps({
    layout: {
        //默认类型和默认选项
        type: String,
        default: "create,refresh"
    }
}
)
//把字符串转化为数组
const btns = computed(() => prpps.layout.split(","))
</script>